import { defineComponent } from "vue";

export default defineComponent({
  props: {
    title: String,
    num: {
      type: Number,
      default: () => "",
    },
  },
  emits: ["btnClick"],
  setup(props, { slots, emit }) {
    // console.log(props);
    // 子组件往父组件传递事件
    const btnClick = () => {
      emit("btnClick", "我是child子组件传递的参数");
    };
    return () => (
      <div>
        我是Child组件
        <div style={{ color: "#ccc" }}>固定props参数：{props.title}</div>
        <div style={{ color: "#ccc" }}>动态props参数：{props.num}</div>
        <div>{slots.default?.("默认插槽参数")}</div>
        <div>{slots.title?.("具名插槽参数")}</div>
        <div>
          <button onClick={btnClick}>事件传递给父组件</button>
        </div>
      </div>
    );
  },
});
